<template>
  <div class='cad'>
    <a-modal
      width="1200px"
      :footer='null'
      :visible="visible"
      :body-style="{ backgroundColor: '#1b384d' }"
      @update:visible="updateVisible"
      @cancel='updateVisible'
      destroyOnClose
    >
      <template #title>
        <div class='titleBox'>
          <div class='modalTitle'>CAD清单列表</div>
          <button class="importData">导&nbsp;入</button>
        </div>
      </template>
      <div style='padding: 20px'>
        <a-table
          :dataSource="dataSource"
          bordered
          :columns="columns"
          :pagination='false'
          :rowKey="(record,index)=>{return index}"
        />
      </div>
    </a-modal>
  </div>
</template>

<script>
export default {
  name: 'riskModel',
  emits: ['update:visible'],
  props: {
    // 弹窗是否打开
    visible: Boolean,
  },
  data(){
    return{
      dataSource: [],
      columns: [
        {
          title: '序号',
          width: 80,
          align: 'center',
          customRender:(params) =>{
            return params.index + 1
          }
        },
        {
          title: '项目编号',
          dataIndex: 'projectNo',
          key: 'projectNo',
          align: 'center',
          width: 120
        },
        {
          title: '图纸识别数量',
          children: [
            {
              title: '杆塔',
              dataIndex: 'poleTower',
              key: 'poleTower',
              align: 'center',
              width: 120,
            },
            {
              title: '塔型',
              dataIndex: 'towerType',
              key: 'towerType',
              align: 'center',
              width: 120,
            },
          ]
        },
        {
          title: '人工识别数量',
          children: [
            {
              title: '杆塔',
              dataIndex: 'poleTower2',
              key: 'poleTower2',
              align: 'center',
              width: 120,
            },
            {
              title: '塔型',
              dataIndex: 'towerType2',
              key: 'towerType2',
              align: 'center',
              width: 120,
            },
          ]
        },
        {
          title: '准确率',
          dataIndex: 'accuracy',
          key: 'accuracy',
          align: 'center',
          width: 120
        },
      ]
    }
  },
  mounted() {
    this.getListData()
  },
  methods:{
    getListData(){
      this.dataSource = [
        {projectNo: '63-S1027Z',poleTower: 12,towerType: 12,poleTower2: 12,towerType2: 12,accuracy: '30%'},
        {projectNo: '64-S1027Z',poleTower: 54,towerType: 54,poleTower2: 54,towerType2: 54,accuracy: '80%'},
        {projectNo: '65-S1027Z',poleTower: 33,towerType: 33,poleTower2: 33,towerType2: 33,accuracy: '76%'},
      ]
    },
    updateVisible() {
      this.$emit('update:visible', false);
    }
  }
}
</script>

<style scoped lang='less'>
.titleBox{
  background-image: url("../../../assets/img/modalBg.png");
  background-repeat: no-repeat;
  height: 53px;
  padding: 12px 24px 14px 35px;
  background-color: #2a4a61;
  display: flex;justify-content: space-between;
}
.modalTitle{
  color: #ffffff;
  font-weight: 600;
}
.cad {
  :global(.ant-modal-header) {
    padding: 0;
    border: 0;
  }
}
.cad{
  :global(.ant-table-tbody){
    background-color: #2a4a61;
    color: white;
  }
}
.cad{
  :global(.ant-table-thead > tr > th){
    background-color: #2a4a61;
    color: white;
    font-weight: 600;
  }
}
:global(.ant-table-tbody > tr:hover > td){
  background:transparent ! important;
}
.importData{
  background-color: #027db4;color:#ffffff;padding: 3px 10px;border: none;
  border-radius: 5px;
  font-size: 13px;
  cursor: pointer;
  margin-right: 30px;
}
</style>

